<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #boll {
            width: 100px;
            height:100px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="boll" style="left: 200px;top:0px;"></div>
x:<input type="text" id="x"><br>
y:<input type="text" id="y"><br>
<input type="button" value="移动" onclick="move()">
<script>
    function move(){
        var xObj = document.getElementById('x');        //文本框中，要移动的横向位置的对象
        var yObj = document.getElementById('y');        //文本框中，要移动的纵向位置的对象
        var x = xObj.value;                              //文本框中，要移动的横向位置，字符型使用typeof x 看看
        var y = yObj.value;                              //文本框中，要移动的纵向位置，字符型

        var bollObj = document.getElementById('boll');  //小球对象
        console.log(bollObj.style.left);                //小球的left，测试
        console.log(bollObj.style.top);                 //小球的top

        var originLeft = parseInt(bollObj.style.left);      //left   200px转换成200,并赋值给dom对象
        var originTop = parseInt(bollObj.style.top);       // top     0px转换成0，并赋值给dom对象
        var destLeft = originLeft + parseInt(x);//20050     //+号就是数学中的加法
        var destTop = originTop + parseInt(y);

        bollObj.style.left =destLeft  + 'px';            //字符串相加
        bollObj.style.top =destTop  + 'px';              //字符串相加，最后成为一个句子


    }

</script>
</body>
</html>